<template>
    <div>
        <van-sticky>
            <!-- 头部搜索框位置  -->
            <div style="height: 60px;background-color: yellow;"></div>
        </van-sticky>
        <!-- 本周活动 -->
        <div style="background-color: #fff;">
            <div
                style="display: flex; justify-content: flex-start;height: 40px;align-items: center;margin: 20px 0 20px 20px;">
                <span style="width: 4px; height: 20px;background-color: #73A6D9;display: inline-block;"></span>
                <span style="display: inline-block;margin-left: 10px;font-size: 1.2em;">本周活动</span>
            </div>
            <div class="shop_s">
                <div class="shop_1" style="background-color: #E777A0;">
                    <div>
                        <span>精品优选</span>
                        <span>买二送一</span>
                    </div>
                    <img src="../../assets/img/1.jpg" alt="">
                </div>
                <div class="shop_1" style="background-color: #73A6D9;">
                    <div>
                        <span>情侣专场</span>
                        <span>满60减10</span>
                    </div>
                    <img src="../../assets/img/2.jpg" alt="">
                </div>
                <div class="shop_1" style="background-color: orange;">
                    <div>
                        <span>口味经典</span>
                        <span>物美价廉</span>
                    </div>
                    <img src="../../assets/img/3.jpg" alt="">
                </div>
                <div class="shop_1" style="background-color: #AC7BB4;">
                    <div>
                        <span>限时特卖</span>
                        <span>碗大量多</span>
                    </div>
                    <img src="../../assets/img/4.jpg" alt="">
                </div>
            </div>
        </div>
        <!--优惠活动  -->
        <div class="youhui">
            <div class="youhui_s">
                <img src="../../assets/img/5.jpg" alt="">
                <div class="youhui_z">
                    <h3>一碗糖水</h3>
                    <h3>好吃送到家</h3>
                    <b>立即查看</b>
                </div>
            </div>
            <div class="youhiu_x">
                <h2>标题</h2>
                <van-text-ellipsis rows="3" :content="text" style="margin: 0 10px;" />
                <h3>查看更多优惠活动 ></h3>
            </div>
        </div>
        <!--  -->
        <div class="my">
            <img src="" alt="">
            <div class="right">
                <van-text-ellipsis :content="text" />
                <van-text-ellipsis :content="text" />
                <div class="right_x">
                    <div>
                        <van-icon name="chat-o" />1
                        <van-icon name="star-o" />2
                    </div>
                    <span>2016-01-01</span>
                </div>
            </div>
        </div>
        <div class="my">
            <img src="" alt="">
            <div class="right">
                <van-text-ellipsis :content="text" />
                <van-text-ellipsis :content="text" />
                <div class="right_x">
                    <div>
                        <van-icon name="chat-o" />1
                        <van-icon name="star-o" />2
                    </div>
                    <span>2016-01-01</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案111111111111,11111111111111111111111111111111111111111111111111111111。';

</script>

<style lang="scss" scoped>
.shop_s {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    .shop_1 {
        width: 170px;
        height: 100px;
        box-sizing: border-box;
        margin: 0 5px 20px 15px;
        border-radius: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;

        span {
            display: inline-block;
            color: #fff;
            margin: 5px 0;
        }

        img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }
    }
}

.youhui {
    height: 300px;
    // border: 1px solid black;
    margin: 0 auto;
}

.youhui .youhui_s {
    width: 350px;
    height: 100px;
    margin: 0 auto;
    position: relative;

    img {
        display: block;
        width: 100%;
    }

}

.youhui .youhui_s .youhui_z {
    width: 100px;
    position: absolute;
    top: 30px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    color: #fff;

    b {
        background-color: #F1B66A;
        font-weight: 300;
        font-size: 1em;
        padding: 3px 5px;
    }
}

.youhiu_x {
    width: 350px;
    height: 100px;
    background-color: #fff;
    margin: 30px auto;
    // border: 1px solid black;

    h2 {
        margin-left: 20px;
    }

    h3 {
        margin-left: 180px;
        color: #BD5D6C;
    }
}

.my {
    height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid black;
    img {
        width: 80px;
        height: 80px;
    }
}

.right {
    box-sizing: border-box;
    padding: 0 10px;
    width: calc(100% - 80px);
}

.right .right_x {
    display: flex;
    justify-content: space-between;

}</style>